<template>
  <u-popup
    v-model="showPop"
    :safe-area-inset-bottom="true"
    mode="bottom"
    height="882rpx"
    :closeable="true"
    @close="handleClose"
  >
    <view class="resume-type-container" v-if="showResumeType">
      <view class="pop-title">选择导入简历方式</view>
      <view class="type-container">
        <view
          v-for="(item, index) in resumeTypeList"
          :key="index"
          :class="['type-item', index + 1 == form.resumeType ? 'active' : '']"
          @click="handleSelectResumeType(item, index)"
          >{{ item.name }}</view
        >
      </view>
    </view>
    <view class="resume-list-container" v-else>
      <view class="pop-title">
        <view class="left-arrow" @click="handleShowResumeType">
          <u-icon name="arrow-left" color="#000" size="32"></u-icon>
        </view>
        <view class="pop-title-text">选择简历附件导入</view>
        <view></view>
      </view>
      <view class="resume-list">
        <template v-if="resumeList.length">
          <view
            v-for="(item, index) in resumeList"
            class="resume-list-item"
            :key="index"
          >
            <view class="resume-list-item-main">
              <view
                class="resume-list-item-main-left"
                @click="handleDownload(item)"
              >
                <image :src="appendixImg"></image>
              </view>
              <view
                class="resume-list-item-main-middle"
                @click="handleDownload(item)"
              >
                <view class="title">
                  {{ item.attName }}
                </view>
                <view class="date"> {{ item.updateTime }} 上传 </view>
              </view>
              <image
                class="delete-icon"
                :src="deleteResume"
                @click="handleDelete(item)"
              ></image>
            </view>
            <view class="resume-list-item-main-right">
              <view class="btn-delete">
                <view class="resume-list-item-select">
                  <image
                    v-if="selectedId == item.id"
                    :src="enclosureSelected"
                    @click="handleSelectResumeItem(item)"
                  ></image>
                  <image
                    v-else
                    :src="enclosureUnSelect"
                    @click="handleSelectResumeItem(item)"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="no-data">
            <image :src="noData" class="no-data-img"></image>
            <text class="text">暂无数据，请点击下方按钮上传附件简历</text>
          </view>
        </template>
      </view>
      <view class="footer">
        <view
          v-if="resumeList.length > 0"
          :class="['btn', selectedId ? 'active' : '']"
          @click="handleShowConfirmModal"
          >确定</view
        >
        <view
          :class="['btn', 'mt24', isActive ? 'active' : '']"
          @click="handleUpload"
          >{{ resumeList.length ? '上传新附件简历' : '上传附件简历' }}</view
        >
      </view>
    </view>
    <u-modal
      v-model="showTip"
      width="516"
      :show-title="false"
      :content="tipContent"
      :content-style="contentStyle"
      :show-cancel-button="true"
      confirm-color="#F75A3E"
      cancel-color="#999999"
      negative-top="17vh"
      @confirm="handleConfirm"
    ></u-modal>
  </u-popup>
</template>

<script>
import {
  selectAll,
  remove,
  personAddAttachment
} from '@/api/modules/resumeCreate';
import { uploadAction, uploadBaseUrl } from '@/api/index';
export default {
  name: 'ResumeTypePopup',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(val) {
      this.showPop = val;
      if (val) {
        this.retryCount = 0;
        this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
        this.getPersonFuJianList();
      }
    }
  },
  data() {
    return {
      showPop: false,
      showResumeType: true,
      resumeTypeList: [
        { name: '附件简历', value: '1' },
        { name: '在线简历', value: '2' }
      ],
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      appendixImg: this.$imgBaseSelf + 'resume/appendix_new.svg',
      enclosureUnSelect: this.$imgBase + 'resume/enclosureUnSelect_new.svg',
      enclosureSelected: this.$imgBase + 'resume/enclosureSelected_new.svg',
      deleteResume: this.$imgBase + 'resume/delete_resume.png',
      noData: this.$imgBaseSelf + 'resume/no_data_resume.png',
      tipContent: '使用简历附件分析，会覆盖当前的在线简历信息，是否覆盖？',
      contentStyle: {
        fontWeight: '600',
        fontSize: '36rpx',
        color: '#000000',
        lineHeight: '50rpx',
        textAlign: 'left'
      },
      showPop: false,
      showTip: false,
      isActive: false,
      resumeList: [],
      selectedId: '',
      selectedItem: ''
    };
  },
  methods: {
    handleSelectResumeType(item) {
      // 附件简历
      if (item.value == '1') {
        this.showResumeType = false;
      } else {
        // 在线简历
        const temp = {
          attUrl: '',
          attName: item.name,
          updateTime: '',
          type: '2'
        };
        this.$emit('emitParams', JSON.stringify(temp));
        this.handleClose();
      }
    },
    handleConfirm() {
      const temp = {
        attUrl: this.selectedItem.attUrl,
        attName: this.selectedItem.attName,
        updateTime: this.selectedItem.updateTime,
        type: '1'
      };
      this.selectedId = '';
      this.selectedItem = '';
      this.$emit('emitParams', JSON.stringify(temp));
      this.handleClose();
    },
    handleShowResumeType() {
      this.showResumeType = true;
    },
    handleShowConfirmModal() {
      if (!this.selectedId) {
        uni.showToast({ title: '请先选择简历', icon: 'none', duration: 1500 });
        return;
      }
      this.showTip = true;
    },
    handleDownload(item) {
      uni.showLoading({
        title: '正在打开简历'
      });
      uni.downloadFile({
        url: item.attUrl,
        success: (res) => {
          if (+res.statusCode === 200) {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: function (saveRes) {
                setTimeout(() => {
                  uni.hideLoading();
                  uni.openDocument({
                    filePath: saveRes.savedFilePath
                  });
                }, 1500);
              }
            });
          }
        }
      });
    },
    handleDelete(item) {
      uni.showModal({
        title: '温馨提示',
        content: `确认删除简历附件《${item.attName}》？`,
        success: (modalRes) => {
          if (modalRes.confirm) {
            let param = {
              idList: [item.id]
            };
            remove(param).then((res) => {
              if (+res.code === 200) {
                uni.showToast({
                  icon: 'none',
                  title: '删除成功'
                });
                this.getPersonFuJianList();
                if (this.selectedId == item.id) {
                  this.selectedId = '';
                }
              }
            });
          }
        }
      });
    },
    handleSelectResumeItem(item) {
      this.selectedId = item.id;
      this.selectedItem = item;
    },
    handleClose() {
      this.selectedId = '';
      this.selectedItem = '';
      this.showResumeType = true;
      this.$emit('close');
    },
    getPersonFuJianList() {
      let param = {
        person_id: this.personId,
        attStatus: '1'
      };
      selectAll(param).then((res) => {
        if (+res.code === 200) {
          this.resumeList = res.data;
          this.isActive = this.resumeList.length <= 0;
        }
      });
    },
    handleUpload() {
      // #ifdef MP-WEIXIN
      if (this.resumeList.length >= 3) {
        return uni.showToast({
          icon: 'none',
          title: '最多可保存3个附件简历'
        });
      }
      let uploadApi = wx.chooseMessageFile;
      // #endif
      const TYPE = ['.doc', '.docx', '.pdf'];
      uploadApi({
        count: 1, //默认100
        extension: TYPE,
        success: (res) => {
          let tempFilePaths = res.tempFiles;
          let fileExt = '.' + tempFilePaths[0].name.replace(/.+\./, '');
          if (TYPE.indexOf(fileExt) < 0) {
            return uni.showToast({
              icon: 'none',
              title: '请选择pdf类型文件'
            });
          }
          if (tempFilePaths[0].size / (1024 * 1024) > 10) {
            return uni.showToast({
              icon: 'none',
              title: '文件大小不能超过10M'
            });
          }
          uni.showLoading({
            title: '正在上传'
          });
          uni.uploadFile({
            url: uploadAction,
            filePath: tempFilePaths[0].path,
            name: 'file',
            success: (uploadRes) => {
              let param = {
                personId: this.personId,
                attUrl: uploadBaseUrl + uploadRes.data,
                attName: tempFilePaths[0].name
              };
              personAddAttachment(param).then((fujianRes) => {
                uni.hideLoading();
                if (fujianRes.code === 200) {
                  uni.showToast({
                    icon: 'none',
                    title: '上传成功'
                  });
                  this.getPersonFuJianList();
                }
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.resume-type-container {
  .pop-title {
    font-weight: 600;
    font-size: 44rpx;
    color: #222222;
    padding: 32rpx;
  }
  .type-container {
    margin: 0 32prx;
    margin-top: 134rpx;
    .type-item {
      background: #f7f7f7;
      border-radius: 16rpx;
      margin: 0 32rpx 32rpx 32rpx;
      padding: 60rpx 0;
      text-align: center;
      font-size: 36rpx;
      color: #222222;
    }
    .active {
      background: #f75a3e;
      color: #fff;
    }
  }
}
.resume-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .pop-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #222222;
    .left-arrow {
      padding: 32rpx;
    }
    .pop-title-text {
      padding: 32rpx 0;
      margin-left: -64rpx;
      font-weight: 600;
      font-size: 36rpx;
      text-align: center;
    }
  }
  .resume-list {
    margin: 0 32rpx 0 32rpx;
    position: relative;
    .bottomBtnContainer {
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: white;
      height: 292rpx;
      width: 100vw;
      .btn-upload {
        bottom: 80rpx;
        position: fixed;
        flex-shrink: 0;
        width: calc(100% - 64rpx);
        border: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .btn-parse {
        bottom: 180rpx;
        position: fixed;
        flex-shrink: 0;
        width: calc(100% - 64rpx);
        border: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &-item {
      position: relative;
      display: flex;
      align-items: center;
      .templateTag {
        position: absolute;
        top: 0;
        left: 0;
        padding: 5rpx 10rpx;
        background: #ffebdc;
        border-radius: 8rpx 0rpx 8rpx 0rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #eb8232;
        line-height: 22rpx;
        text-align: left;
        font-style: normal;
      }
      &-main {
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        margin-bottom: 16rpx;
        padding: 24rpx;
        flex: 1;
        &-left {
          margin-right: 24rpx;
          image {
            width: 68rpx;
            height: 68rpx;
            margin-top: 4rpx;
          }
        }
        &-middle {
          flex: 1;
          width: 0;
          .title {
            width: 395rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
            line-height: 40rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 12rpx;
            .prior-show {
              color: #fb675c;
              padding-left: 10rpx;
              padding-right: 10rpx;
              padding-top: 5rpx;
              font-size: 28rpx;
              margin-left: 10rpx;
              padding-bottom: 5rpx;
              border: 1rpx solid #fb675c;
            }
          }
          .date {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
          }
        }
        .delete-icon {
          width: 56rpx;
          height: 56rpx;
        }
        &-right {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0 15rpx 20rpx;
          .btn-delete {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 40rpx;
            height: 40rpx;
            background-size: 100% 100%;
            .btn-dot {
              width: 7rpx;
              height: 7rpx;
              border-radius: 50%;
              background: #a4a4a4;
            }
          }
        }
      }
      &-select {
        image {
          width: 47rpx;
          height: 47rpx;
          margin-left: 20rpx;
        }
      }
    }
    .no-data {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .no-data-img {
        width: 360rpx;
        height: 360rpx;
        margin-bottom: 24rpx;
      }
      .text {
        font-size: 28rpx;
        color: #888888;
        line-height: 40rpx;
      }
    }
  }
  .footer {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {
      height: 80rpx;
      line-height: 80rpx;
      width: calc(100% - 64rpx);
      border-radius: 12rpx;
      background: #f5f5f5;
      color: #555;
      text-align: center;
    }
    .active {
      background: #f75a3e;
      color: #fff;
    }
    .mt24 {
      margin-top: 24rpx;
    }
  }
}
</style>
